<template>
  <div class="vessel">
    <div class="typeArea">
      <div class="typeArea-head">
        <a href="">
          <img src="../../utils/imgs/logo.png" alt="" />
        </a>
        <div class="sz" onclick="switching">
          <ul>
            <li>
              深圳
              <ul class="sz-div">
                <li class="sz-dw">定位城市：{{ "深圳" }}</li>
                <li class="sz-jq">近期定位：{{ "深圳" }}</li>
                <li class="sz-list">
                  <div>A</div>
                  <ul class="sz-ul">
                    <li>阿拉善盟</li>
                    <li>鞍山</li>
                    <li>安庆</li>
                    <li>安阳</li>
                    <li>阿坝</li>
                    <li>安顺</li>
                    <li>安康</li>
                    <li>阿勒泰</li>
                    <li>阿克苏</li>
                    <li>安吉</li>
                    <li>安丘</li>
                    <li>安岳</li>
                    <li>安平</li>
                    <li>安宁</li>
                    <li>安溪</li>
                    <li>安化</li>
                    <li>阿勒泰市</li>
                    <li>安福</li>
                    <li>阿荣旗</li>
                    <li>安陆市</li>
                    <li>安州区</li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </div>
        <div>首页</div>
        <div style="background-color: #ef4238; color: #fff">电影</div>
        <div>影院</div>
        <div>演出</div>
        <div>榜单</div>
        <div>热点</div>
        <div class="shopping">
          商城
          <div></div>
        </div>
        <div style="width: 132px" class="app">APP下载</div>
        <div cl style="width: 78px" class="img">
          <img
            style="width: 40px; margin-top: 20px"
            src="https://p0.meituan.net/movie/7dd82a16316ab32c8359debdb04396ef2897.png"
            alt=""
          />
          <div class="login"></div>
          <div class="login1">登录</div>
        </div>
        <div class="input">
          <input
            type="text"
            v-model="input"
            placeholder="找影视剧、影人、影院"
          />
          <span>
            <div class="icon-search"></div>
          </span>
        </div>
      </div>
    </div>

    <div class="tab">
      <div class="tab-div">
        <div class="head1">
          <div>正在热映</div>
        </div>
        <div>即将上映</div>
        <div>经典影片</div>
      </div>
    </div>

    <div class="body-top">
      <div class="body-top-div">
        <div class="body-top-div-type">
          <div class="body-classify">类型:</div>
          <ul class="body-classify-list">
            <li v-for="item in type" :key="item.text">
              {{ item.text }}
            </li>
          </ul>
        </div>
        <div class="body-top-div-type">
          <div class="body-classify">区域:</div>
          <ul class="body-classify-list">
            <li v-for="item in area" :key="item.text">{{ item.text }}</li>
          </ul>
        </div>
        <div class="body-top-div-type">
          <div class="body-classify">年代:</div>
          <ul class="body-classify-list">
            <li v-for="item in age" :key="item.text">{{ item.text }}</li>
          </ul>
        </div>
      </div>
    </div>

    <div class="body-bottom">
      <div class="order" id="order">
        <div class="order-list">
          <div class="sign"></div>
          <div>按热门排序</div>
        </div>
        <div class="order-list">
          <div class="sign"></div>
          <div>按时间排序</div>
        </div>
        <div class="order-list">
          <div class="sign"></div>
          <div>按评价排序</div>
        </div>
      </div>
      <div class="display">
        <div class="display-list" v-for="item in display" :key="item.title">
          <img :src="item.src" />
          <div>{{ item.name }}</div>
          <div class="score">{{ item.pingfen }}</div>
          <a>{{ item.goupiao }}</a>
        </div>
      </div>
    </div>
    <div class="paging">
      <ul>
        <li>1</li>
        <li>2</li>
        <li>下一页</li>
      </ul>
    </div>
  </div>
  <!-- <div></div> -->
</template>

<script lang="ts">
export default {
  name: "MaoYanMovie",
  data() {
    return {
      input: "",
    };
  },
};
</script>

<script setup lang="ts">
/******************** 动态添加子元素 ********************/
// function taxon() {
//   var lis = document.querySelectorAll("tab-div >div");
//   for (var i = 0; i < lis.length; i++) {
//     lis[i].onclick = function (e) {
//       //简单的排他
//       for (var j = 0; j < lis.length; j++) {
//         lis[j].className = "";
//       }
//       this.className = "head1";

//       e.stopPropagation();
//     };
//   }
// }

/******************** 动态添加子元素 ********************/
// (function clickBind() {
//   /*
//       思路
//       1.获取所有dl元素，取其中第一个dl元素下的dd先做测试
//       2.循环所有dd元素并且添加点击事件
//       3.确定实际发生事件的目标源对象设置其文字颜色为红色，然后给其他是所有的元素都重置基础颜色
//   */

//   // 1.找第一个dl下的所有dd元素
//   let dlNodes = document.querySelectorAll(".paging ul li");
//   // console.log(dlNodes);

//   // console.log(ddNodes);
//   for (let k = 0; k < dlNodes.length; k++) {
//     let ddNodes = dlNodes[k].querySelectorAll("li");
//     // 2.遍历当前所有的dd元素
//     for (let i = 0; i < ddNodes.length; i++) {
//       ddNodes[i].onclick = function () {
//         for (let j = 0; j < ddNodes.length; j++) {
//           ddNodes[j].style.color = "#666";
//         }
//         this.style.color = "red";
//       };
//     }
//   }
// })();

const display = [
  {
    src: "https://p0.pipi.cn/mmdb/25bfd69202f3393ba37e12a0b4797df31b7f4.jpg?imageView2/1/w/160/h/220",
    title: "",
    goupiao: "  购票",
    name: "              我的遗憾和你有关",
    leixing: "              青春／爱情",
    zhuyan: "              何蓝逗／曹煜辰／梁颂晴",
    shangying: "              2022-11-04 18:00",
    pingfen: "    暂无评分",
  },
  {
    src: "https://p0.pipi.cn/mmdb/25bfd6922ffc7e50c8af3397dee2d43a3e265.jpg?imageView2/1/w/160/h/220",
    title: "",
    goupiao: "  购票",
    name: "              扫黑行动",
    leixing: "              犯罪／动作",
    zhuyan: "              周一围／秦海璐／张智霖",
    shangying: "              2022-11-11 18:00",
    pingfen: "    暂无评分",
  },
  {
    src: "https://p0.pipi.cn/mmdb/25bfd6ddb53c7e5015d23c5bc24d876c03d41.jpg?imageView2/1/w/160/h/220",
    title: "",
    goupiao: "  购票",
    name: "              万里归途",
    leixing: "              类型:",
    zhuyan: "              主演:",
    shangying: "              上映时间:",
    pingfen: "    9.6",
  },
  {
    src: "https://p0.pipi.cn/mmdb/25bfd69202f51b57e23ba33cd38bc8972723a.jpg?imageView2/1/w/160/h/220",
    title: "",
    goupiao: "  购票",
    name: "              叫我郑先生",
    leixing: "              公路／爱情",
    zhuyan: "              涂们／王真儿／林雪",
    shangying: "              2022-11-11 09:00",
    pingfen: "    暂无评分",
  },

  {
    src: "https://p0.pipi.cn/mmdb/25bfd6ddb53338925739ddde572ed1be162d4.jpg?imageView2/1/w/160/h/220",
    title: "",
    goupiao: "  购票",
    name: "              平凡英雄",
    leixing: "              类型:",
    zhuyan: "              主演:",
    shangying: "              上映时间:",
    pingfen: "    9.3",
  },
  {
    src: "https://p0.pipi.cn/mmdb/25bfd651ecd2ff8ea3f2aa9ff5f49e1ff99b6.jpg?imageView2/1/w/160/h/220",
    title: "",
    goupiao: "  购票",
    name: "              哥，你好",
    leixing: "              类型:",
    zhuyan: "              主演:",
    shangying: "              上映时间:",
    pingfen: "    9.1",
  },
  {
    src: "https://p0.pipi.cn/mmdb/25bfd6512ffdddbe12f0ee77e460504b2653b.jpg?imageView2/1/w/160/h/220",
    title: "",
    goupiao: "  购票",
    name: "              还是觉得你最好",
    leixing: "              类型:",
    zhuyan: "              主演:",
    shangying: "              上映时间:",
    pingfen: "    8.7",
  },
  {
    src: "https://p0.pipi.cn/mmdb/25bfd692ddd5bf06d6cbae06048b67a0e810e.jpg?imageView2/1/w/160/h/220",
    title: "",
    goupiao: "  购票",
    name: "              猫狗武林",
    leixing: "              动画／奇幻／冒险／动作",
    zhuyan: "              迈克尔·塞拉／瑞奇·热维斯／武井乔治",
    shangying: "              2022-11-12 08:00",
    pingfen: "    暂无评分",
  },
  {
    src: "https://p0.pipi.cn/mmdb/d2dad592b12f2aecd85bf1e2b67ecef72192c.jpg?imageView2/1/w/160/h/220",
    title: "",
    goupiao: "  购票",
    name: "              流浪地球",
    leixing: "              类型:",
    zhuyan: "              主演:",
    shangying: "              上映时间:",
    pingfen: "    9.2",
  },
  {
    src: "https://p0.pipi.cn/mmdb/25bfd651ecd5bf8ea3b860d86473b7e916b76.jpg?imageView2/1/w/160/h/220",
    title: "",
    goupiao: "  购票",
    name: "              天之书",
    leixing: "              奇幻／动作",
    zhuyan: "              李砚／张楠／刘佩琦",
    shangying: "              2022-11-12",
    pingfen: "    暂无评分",
  },

  {
    src: "https://p0.pipi.cn/mmdb/25bfd6dd0300fa7a35f2aa050da82ba12c344.jpg?imageView2/1/w/160/h/220",
    title: "",
    goupiao: "  购票",
    name: "              明日战记",
    leixing: "              类型:",
    zhuyan: "              主演:",
    shangying: "              上映时间:",
    pingfen: "    9.1",
  },
  {
    src: "https://p0.pipi.cn/mmdb/25bfd6929230faaf332ff7feca2d8b7e228dc.jpg?imageView2/1/w/160/h/220",
    title: "",
    goupiao: "  购票",
    name: "              陪你在全世界长大",
    leixing: "              家庭／纪录片",
    zhuyan: "              辛巴／徐承华／王冰",
    shangying: "              2022-11-11 08:00",
    pingfen: "    暂无评分",
  },
  {
    src: "https://p0.pipi.cn/mmdb/25bfd6be9abc7e8d3311e5bd9b6d287be0f28.png?imageView2/1/w/160/h/220",
    title: "",
    goupiao: "  购票",
    name: "              长津湖之水门桥",
    leixing: "              类型:",
    zhuyan: "              主演:",
    shangying: "              上映时间:",
    pingfen: "    9.6",
  },

  {
    src: "https://p0.pipi.cn/mmdb/25bfd6ddd7c339230fd7c32148add50d37daf.jpg?imageView2/1/w/160/h/220",
    title: "",
    goupiao: "  购票",
    name: "              海的尽头是草原",
    leixing: "              类型:",
    zhuyan: "              主演:",
    shangying: "              上映时间:",
    pingfen: "    9.2",
  },
  {
    src: "https://p0.pipi.cn/mmdb/25bfd6dde7af2a2c9550c833532b5ce9e07fc.jpg?imageView2/1/w/160/h/220",
    title: "",
    goupiao: "  购票",
    name: "              新灰姑娘2",
    leixing: "              类型:",
    zhuyan: "              主演:",
    shangying: "              上映时间:",
    pingfen: "    8.4",
  },
  {
    src: "https://p0.pipi.cn/mmdb/25bfd6515bfddd0fafd7c3dd3050c2bd8ef10.jpg?imageView2/1/w/160/h/220",
    title: "",
    goupiao: "  购票",
    name: "              我是霸王龙",
    leixing: "              类型:",
    zhuyan: "              主演:",
    shangying: "              上映时间:",
    pingfen: "    7.5",
  },
  {
    src: "https://p0.pipi.cn/mmdb/25bfd65187a923be12b8607870b84d901af50.jpg?imageView2/1/w/160/h/220",
    title: "",
    goupiao: "  购票",
    name: "              新大头儿子和小头爸爸5：我的外星朋友",
    leixing: "              类型:",
    zhuyan: "              主演:",
    shangying: "              上映时间:",
    pingfen: "    9.2",
  },
  {
    src: "https://p0.pipi.cn/mmdb/25bfd6dd7a3ddd5bf171f700040d22d304789.jpg?imageView2/1/w/160/h/220",
    title: "",
    goupiao: "  购票",
    name: "              钢铁意志",
    leixing: "              历史",
    zhuyan: "              刘烨／韩雪／林永健",
    shangying: "              2022-09-30",
    pingfen: "    暂无评分",
  },
  {
    src: "https://p0.pipi.cn/mmdb/25bfd68de7adddddd2395b4c04f4737cd31fc.jpg?imageView2/1/w/160/h/220",
    title: "",
    goupiao: "  购票",
    name: "              奇迹·笨小孩",
    leixing: "              类型:",
    zhuyan: "              主演:",
    shangying: "              上映时间:",
    pingfen: "    9.5",
  },
  {
    src: "https://p0.pipi.cn/mmdb/d2dad5927a302fd23651ba357a97181552c5d.jpg?imageView2/1/w/160/h/220",
    title: "",
    goupiao: "  购票",
    name: "              狙击手",
    leixing: "              类型:",
    zhuyan: "              主演:",
    shangying: "              上映时间:",
    pingfen: "    9.5",
  },

  {
    src: "https://p0.pipi.cn/mmdb/25bfd6925bf2ffbe122c955af70d0924a7ab5.jpg?imageView2/1/w/160/h/220",
    title: "",
    goupiao: "  购票",
    name: "              青蛙王子历险记2",
    leixing: "              动画／冒险／合家欢",
    zhuyan: "              丁润琦／王亚林／叶方",
    shangying: "              2022-11-12 10:00",
    pingfen: "    暂无评分",
  },
  {
    src: "https://p0.pipi.cn/mmdb/d2dad52f06df2a87a9be2a26948308a47d447.jpg?imageView2/1/w/160/h/220",
    title: "",
    goupiao: "  购票",
    name: "              你好，珠峰",
    leixing: "              剧情",
    zhuyan: "              郭真如／胡文珊／陈定伟",
    shangying: "              2022-11-11",
    pingfen: "    暂无评分",
  },
  {
    src: "https://p0.pipi.cn/mmdb/d2dad5920308079ab4339e8508af7660ac69e.jpg?imageView2/1/w/160/h/220",
    title: "",
    goupiao: "  购票",
    name: "              红海行动",
    leixing: "              类型:",
    zhuyan: "              主演:",
    shangying: "              上映时间:",
    pingfen: "    9.4",
  },
  {
    src: "https://p0.pipi.cn/mmdb/d2dad5927a30e151bac9fd8176b1ed2563d04.jpg?imageView2/1/w/160/h/220",
    title: "",
    goupiao: "  购票",
    name: "              悬崖之上",
    leixing: "              类型:",
    zhuyan: "              主演:",
    shangying: "              上映时间:",
    pingfen: "    9.1",
  },
  {
    src: "https://p0.pipi.cn/mmdb/25bfd692ddd7e13139313954ee2938728ad6a.jpg?imageView2/1/w/160/h/220",
    name: "        名侦探柯南：万圣节的新娘",
    goupiao: "预售",
    pingfen: "    8.4",
  },
  {
    src: "https://p0.pipi.cn/mmdb/25bfd692ddd51bf0ee7df5e957c0841af9898.jpg?imageView2/1/w/160/h/220",
    name: "        人生路不熟",
    goupiao: "",
    pingfen: "    8.4",
  },
  {
    src: "https://p0.pipi.cn/mmdb/25bfd6dd06d2ff3ba3be126918a5cab2db871.jpg?imageView2/1/w/160/h/220",
    name: "        可不可以不要离开我",
    goupiao: "",
    pingfen: "    8.4",
  },
  {
    src: "https://p0.pipi.cn/mmdb/25bfd69251b51b9235281ed1be968a257e0fb.jpg?imageView2/1/w/160/h/220",
    name: "        坠落",
    goupiao: "",
    pingfen: "    8.4",
  },
  {
    src: "https://p0.pipi.cn/mmdb/25bfd6337e1b12339eb12daddf10a9a5f57bc.jpg?imageView2/1/w/160/h/220",
    name: "        流浪地球2",
    goupiao: "",
    pingfen: "    8.4",
  },
  {
    src: "https://p0.pipi.cn/mmdb/25bfd651b5392302ff7a35cd312dd985b38a3.jpg?imageView2/1/w/160/h/220",
    name: "        倒数说爱你",
    goupiao: "",
    pingfen: "    8.4",
  },
];
const type = [
  { text: "全部" },
  { text: "爱情" },
  { text: "喜剧" },
  { text: "动画" },
  { text: "剧情" },
  { text: "恐怖" },
  { text: "惊悚" },
  { text: "科幻" },
  { text: "动作" },
  { text: "悬疑" },
  { text: "犯罪" },
  { text: "冒险" },
  { text: "战争" },
  { text: "奇幻" },
  { text: "运动" },
  { text: "家庭" },
  { text: "古装" },
  { text: "武侠" },
  { text: "西部" },
  { text: "历史" },
  { text: "传记" },
  { text: "歌舞" },
  { text: "黑色电影" },
  { text: "短片" },
  { text: "纪录片" },
  { text: "戏曲" },
  { text: "音乐" },
  { text: "灾难" },
  { text: "青春" },
  { text: "儿童" },
  { text: "其他" },
];
const area = [
  { text: "全部" },
  { text: "大陆" },
  { text: "美国" },
  { text: "韩国" },
  { text: "日本" },
  { text: "中国香港" },
  { text: "中国台湾" },
  { text: "泰国" },
  { text: "印度" },
  { text: "法国" },
  { text: "英国" },
  { text: "俄罗斯" },
  { text: "意大利" },
  { text: "西班牙" },
  { text: "德国" },
  { text: "波兰" },
  { text: "澳大利亚" },
  { text: "伊朗" },
  { text: "其他" },
];
const age = [
  { text: "全部" },
  { text: "2022" },
  { text: "2021" },
  { text: "2020" },
  { text: "2019" },
  { text: "2018" },
  { text: "2017" },
  { text: "2016" },
  { text: "2015" },
  { text: "2014" },
  { text: "2013" },
  { text: "2012" },
  { text: "2011" },
  { text: "2000-2010" },
  { text: "90年代" },
  { text: "80年代" },
  { text: "70年代" },
  { text: "更早" },
];
</script>

<style scoped>
name333 {
  position: absolute;
  width: 900px;
  height: 500px;
  border: 1px solid red;
}
body {
  width: 100%;
  height: 100%;
}
ul {
  list-style: none;
}
.typeArea {
  width: 100%;
  height: 80px;
  text-align: center;
  text-align: center;
  position: relative;
  top: 0;
  position: fixed;
  z-index: 1;
  background-color: #ffffff;
  border-bottom: 1px solid #d8d8d8;
}
.typeArea-head {
  width: 1200px;
  height: 80px;
  line-height: 80px;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -600px;
  display: flex;
}
.typeArea-head div {
  width: 76px;
  height: 80px;
  font-size: 18px;
}
.typeArea-head div input {
  background: none;
  outline: none;
  border: 1px solid rgba(00, 00, 00, 0);
  width: 180px;
  height: 40px;
  position: absolute;
  left: 50%;
  margin-left: -90px;
  font-size: 20px;
  font-size: 14px;
}
.img {
  position: absolute;
  right: 0;
}
.img:hover .login {
  width: 78px;
  height: 120px;
  position: absolute;
  border: 1px solid #d8d8d8;
  top: 0;
  display: block;
}
.login1,
.login {
  display: none;
}
.img:hover .login1 {
  width: 77px;
  height: 41px;
  line-height: 40px;
  color: #8e9295;
  font-size: 14px;
  position: absolute;
  background-color: #fff;
  bottom: -41px;
  margin-left: 1px;
  border-right: 1px;
  border-left: 1px solid rgba(0, 0, 0, 0);
  display: block;
}

.input {
  width: 220px !important;
  height: 40px !important;
  border: 1px solid #ccc;
  position: absolute;
  right: 83px;
  margin-top: 20px;
  border-radius: 30px;
}
.input span {
  width: 40px;
  height: 40px;
  background-color: #f34d41;
  position: absolute;
  right: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
}
.tab {
  width: 1903px;
  height: 60px;
  background-color: #47464a;
  position: relative;
  margin-top: 81px;
}
.tab-div {
  position: absolute;
  display: flex;
  width: 432px;
  height: 60px;
  line-height: 60px;
  left: 50%;
  margin-left: -216px;
}
.tab-div div {
  width: 144px;
  text-align: center;
  color: #8e9295;
  position: relative;
}

.body-top {
  position: relative;
  width: 100%;
  height: 224px;
  margin-top: 40px;
}
.body-top-div {
  width: 1120px;
  height: 224px;
  position: absolute;
  left: 50%;
  margin-left: -560px;
  font-size: 14px;
  border: 1px solid#e5e5e5;
}
.body-top-div-type {
  height: 74px;
  display: flex;
  border-bottom: 1px solid#e5e5e5;
}
.body-classify {
  width: 63px;
  height: 74px;
  box-sizing: border-box;
  text-align: center;
  padding: 6px 6px;
  color: #8e9295;
}
.body-classify-list {
  width: 1090px;
  display: flex;
  flex-wrap: wrap;
  height: 20px;
}
.body-classify-list li:nth-child(1) {
  margin-top: 5px;
  background-color: #f34d41;
  color: #fff;
  border-radius: 30px;
  width: 40px;
  height: 15px;
  line-height: 18px;
}
.body-classify-list li {
  line-height: 20px;
  height: 20px;
  padding: 6px 5px;
  text-align: center;
  margin: 5px 12px 0;
}

.body-bottom {
  width: 100%;
  height: 1610px;
  margin-top: 40px;
  position: relative;
}
.order {
  position: absolute;
  left: 50%;
  width: 1120px;
  height: 21px;
  margin-left: -560px;
  display: flex;
}
.order-list {
  display: flex;
  /* flex-wrap: wrap; */
  width: 150px;
  padding: 5px 0;
}

/* 切换类名 */
.order .sign {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1px solid #ccc;
  margin: 3px 5px;
  display: flex;
}
.order div:first-of-type > .sign {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 4px solid red;
  margin: 3px 5px;
  display: flex;
}
.sign1 {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 4px solid red;
  margin: 3px 5px;
  display: flex;
}
.order .sign1 {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid #e5e5e5;
}
.display {
  width: 1145px;
  height: 1674px;
  position: absolute;
  left: 50%;
  margin-left: -585px;
  display: flex;
  flex-wrap: wrap;
}
.display-list {
  width: 160px;
  height: 220px;
  margin: 50px 0 0 30px;
  position: relative;
}
.display-list div {
  width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.display-list a {
  position: absolute;
  background-color: #ef4238;
  color: #fff;
  padding: 1px 3px;
  font-size: 12px;
  line-height: 18px;
  border-radius: 2px;
  margin: 0;
  right: 5px;
  top: 195px;
  position: absolute;
}
.paging {
  width: 1120px;
  height: 32px;
  margin: 80px auto;
  position: relative;
  text-align: center;
}
.paging > ul {
  width: 300px;
  display: flex;

  left: 50%;
  margin-left: -110px;
  position: absolute;
}

.paging ul li {
  padding: 3px 15px;
  border: 1px solid #ccc;
  margin: 0 10px;
}
.paging ul li:first-of-type {
  background-color: #ef4238;
  color: #fff;
}
.sz {
  position: relative;
}
.sz-ul {
  display: flex;
  flex-wrap: wrap;
  position: absolute;
  top: 5px;
  margin-left: 20px;
  margin-right: 10px;
  font-size: 16px;
}
.sz-list {
  position: relative;
  margin-right: 10px;
}
.sz-list div {
  font-weight: 600;
  top: 10px;
  position: absolute;
  text-align: center;
  height: 20px;
  width: 20px;
  line-height: 20px;
  box-sizing: border-box;
  background-color: #eeeeee;
}
.sz-ul li {
  height: 20px;
  line-height: 20px;
  display: list-item;
  margin: 5px 6px;
}
.sz:hover .sz-div {
  display: block;
  overflow: scroll;
}
.sz-div {
  left: 0;
  width: 460px;
  height: 330px;
  background-color: #fff;
  z-index: 1;
  left: 520px;
  color: black;
  padding-left: 20px;
  border: 1px solid #d8d8d8;
  font-size: 14px;
  display: none;
}
.sz-div li {
  /* width: 100%; */
  text-align: left;
}
.sz-dw {
  width: 100%;
  text-align: left;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #d8d8d8;
}
.sz-jq {
  width: 100%;
  text-align: left;
  height: 30px;
  line-height: 30px;
  border-bottom: 1px solid #d8d8d8;
}

.sz1 {
  position: relative;
}
sz-div ul {
  width: 100%;
  display: flex;
}
/******************** 深圳图标上下切换结束 ********************/
.sz::after {
  content: " ";
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -3px;
  height: 0;
  width: 0;
  border: solid transparent;
  border-top-color: #47464a;
  border-width: 4px;
}
.sz1::after {
  content: " ";
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -7px;
  height: 0;
  width: 0;
  border: solid transparent;
  border-bottom-color: #47464a;
  border-width: 4px;
}
/******************** 图标上下切换结束 ********************/
/******************** app下载图标上下切换结束 ********************/
.app::after {
  content: " ";
  position: absolute;
  top: 50%;
  right: 320px;
  margin-top: -3px;
  height: 0;
  width: 0;
  border: solid transparent;
  border-top-color: #47464a;
  border-width: 4px;
}
.app1::after {
  content: " ";
  position: absolute;
  top: 50%;
  right: 320px;
  margin-top: -7px;
  height: 0;
  width: 0;
  border: solid transparent;
  border-bottom-color: #47464a;
  border-width: 4px;
}
/******************** 图标上下切换结束 ********************/
/******************** img图标上下切换结束 ********************/
.img::after {
  content: " ";
  position: absolute;
  top: 50%;
  right: 3px;
  margin-top: -3px;
  height: 0;
  width: 0;
  border: solid transparent;
  border-top-color: #47464a;
  border-width: 4px;
}
.img1::after {
  content: " ";
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -7px;
  height: 0;
  width: 0;
  border: solid transparent;
  border-bottom-color: #47464a;
  border-width: 4px;
}
/******************** 图标上下切换结束 ********************/
/******************** 搜索图标 ********************/
.icon-search {
  width: 12px !important ;
  height: 12px !important ;

  border-radius: 100%;

  border: 2px solid currentcolor;

  position: relative;

  margin: 30px auto;
  color: #fff;
}

.icon-search:after {
  content: "";

  -webkit-transform: rotate(45deg);

  -moz-transform: rotate(45deg);

  transform: rotate(45deg);

  width: 8px;

  height: 2px;

  position: absolute;

  top: 13px;

  left: 11px;

  background-color: currentcolor;
}
/******************** 搜索图标结束 ********************/
/******************** 手机图标 ********************/
.shopping {
  position: relative;
}
.shopping div {
  position: absolute;
  right: -23px;
  top: 50%;
  margin-top: -13px;
  width: 12px;
  height: 20px;
  border: 2px solid #7a7a7a;
  border-radius: 3px;
}
.shopping div:after {
  content: "";
  position: absolute;
  width: 4px;
  height: 2px;
  border: 2px solid #7a7a7a;
  border-left: 6px solid #7a7a7a;
  border-right: 6px solid #7a7a7a;
  border-radius: 2px;
  bottom: -2px;
  left: -2px;
  background-color: #fff;
}
/******************** 图标结束 ********************/
/******************** 排他 ********************/
.head1 > div {
  color: #ef4238;
}
.tab-div > div:first-of-type > div :after {
  position: absolute;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 9px solid #fff;
  content: " ";
  display: block;
  width: 2px;
  height: 0;
  top: 51px;
  left: 0;
  right: 0;
  margin: auto;
}
.head1::after {
  position: absolute;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 9px solid #fff;
  content: " ";
  display: block;
  width: 2px;
  height: 0;
  top: 51px;
  left: 0;
  right: 0;
  margin: auto;
}
.head2::after {
  position: absolute;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 9px solid #fff;
  content: " ";
  display: block;
  width: 2px;
  height: 0;
  top: 51px;
  left: 0;
  right: 0;
  margin: auto;
}
/******************** 排他 ********************/
.score {
  color: #ffb400;
  font-size: 20px;
  margin-top: 10px;
}
</style>
